<template>
  <bui-page-layout ref="pageLayout" :is-z-paging="true">
    <view class="cardinfo-page">
      <u--form labelWidth="200rpx" labelPosition="top" :model="accountInfo" :rules="rules" ref="formInfo">
        <u-form-item required label="银行名称" prop="bankName">
          <view class="input">
            <u--input v-model="accountInfo.bankName" placeholder="请输入" border="none"></u--input>
          </view>
        </u-form-item>
        <u-form-item required label="填写支行" prop="branchBank">
          <view class="input">
            <u--input v-model="accountInfo.branchBank" placeholder="请输入" border="none"></u--input>
          </view>
        </u-form-item>
        <u-form-item required label="填写姓名" prop="name">
          <view class="input">
            <u--input v-model="accountInfo.name" placeholder="请输入" border="none"></u--input>
          </view>
        </u-form-item>
        <u-form-item required label="填写银行卡" prop="accountNo">
          <!-- {{ accountInfo.accountNo }} -->
          <view class="input">
            <u--input v-model="accountInfo.accountNo" placeholder="请输入" border="none"></u--input>
          </view>
        </u-form-item>
      </u--form>
      <b-button :loading="buttonLoading" @change="submitInfo" style="margin-top: 30rpx;">
        <text class="button_t">保存提交</text>
      </b-button>

    </view>
  </bui-page-layout>
</template>
<script setup>
import { ref, reactive } from "vue";
import { onLoad, onReady } from "@dcloudio/uni-app";
import { globalStore } from "@/store";
const gStore = globalStore();
var rules = reactive({
  bankName: {
    type: "string",
    required: true,
    message: "请填写银行名称",
    trigger: ["blur", "change"],
  },
  branchBank: {
    type: "string",
    required: true,
    message: "请填写支行",
    trigger: ["blur", "change"],
  },
  name: {
    type: "string",
    required: true,
    message: "请填写姓名",
    trigger: ["blur", "change"],
  },
  accountNo: [
    {
      required: true,
      message: "请输入银行卡",
      trigger: ["change", "blur"],
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        return uni.$u.test.number(value);
      },
      message: "银行卡输入不正确",
      // 触发器可以同时用blur和change
      trigger: ["blur"],
    },
  ],
});
var type = ref(null);
const formInfo = ref(null);
const buttonLoading = ref(false);
var accountInfo = ref({
  bankName: "",
  branchBank: "",
  accountNo: "",
  name: "",
  id: null,
});
onLoad((options) => {
  type.value = options.type;
});
onReady(() => {
  uni.setNavigationBarTitle({
    title: (type.value === "add" ? "添加" : "编辑") + "银行卡",
  });
  gStore.cardInfo?.id && getPlayInfo(gStore.cardInfo.id);
});
const submitInfo = () => {
  formInfo.value
    .validate()
    .then((res) => {
      buttonLoading.value = true;
      submitPlayInfo();
    })
    .catch((error) => {
      buttonLoading.value = false;
    });
};
const submitPlayInfo = () => {
  var datainfo = {
    type: 3,
    ...accountInfo.value,
  };
  uni.$request
    .service({
      url: "/m/receive/account/save",
      method: "POST",
      data: datainfo,
    })
    .then((res) => {
      buttonLoading.value = false;
      uni.navigateBack({
        delta: 1,
      });
      uni.$emit("payBack");
    })
    .catch((error) => {
      buttonLoading.value = false;
      uni.$u.toast(error.message);
    });
};
const getPlayInfo = (id) => {
  uni.$request
    .service({
      url: "/m/receive/account/detail/" + id,
      method: "GET",
      data: { id },
    })
    .then((res) => {
      accountInfo.value.id = res.id;
      accountInfo.value.name = res.name;
      accountInfo.value.accountNo = res.accountNo;
      accountInfo.value.bankName = res.bankName;
      accountInfo.value.branchBank = res.branchBank;
    })
    .catch((error) => {
      uni.$u.toast(error.message);
    });
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f8;
}
.cardinfo-page {
  padding: 0 40rpx;
  .input {
    flex: 1;
    padding: 20rpx 20rpx;
    background-color: #fff;
    border: 2rpx solid #d3dce6;
    border-radius: 16rpx;
  }
}
.submit {
  background-color: #fe9900;
  display: flex;
  justify-content: center;
  border-radius: 16rpx;
  padding: 22rpx 0;
  margin-top: 30rpx;
  .t {
    font-size: 32rpx;
    color: #fff;
  }
}
</style>
